<template>
	<div class="pie-chart-box">
		<div id="pieChart2"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";

const calc = (v = {}) => {
	let dataArr = [
		{
			title: "医疗费",
			value: v.medical_expenses || 0,
			color: "#05CFF7",
		},
		{
			title: "定金",
			value: v.deposit || 0,
			color: "#60B45E",
		},
		{
			title: "床位费",
			value: v.bed_fee || 0,
			color: "#1978E5",
		},
		{
			title: "护理费",
			value: v.nursing_expenses || 0,
			color: "#BECDD0",
		},
		{
			title: "保证金",
			value: v.margin || 0,
			color: "#EAB966",
		},
		{
			title: "管理费",
			value: v.management_fee || 0,
			color: "#EA6666",
		},
		{
			title: "床品费",
			value: v.bedding_fee || 0,
			color: "#FF3BBA",
		},
	];
	let sum = 0;
	let legendArr = [];
	let chartArr = [];
	dataArr.map((item) => {
		if (+item.value) {
			sum += item.value;
			legendArr.push({
				name: item.title,
				itemStyle: {
					color: item.color,
				},
				textStyle: {
					rich: {
						colorStyle: {
							color: item.color,
						},
					},
				},
			});
			chartArr.push({
				name: item.title,
				value: item.value,
				itemStyle: {
					color: item.color,
				},
				label: {
					color: item.color,
				},
			});
		}
	});

	let options = {
		legend: {
			top: "middle",
			right: "2%",
			data: legendArr,
			icon: "rect",
			itemWidth: 10, //正方形
			itemHeight: 10,
			itemGap: 20, //间距
			width: "45%", //组件宽度
			formatter: (name) => {
				let rate = 0;
				for (let obj of chartArr) {
					if (obj.name === name) {
						rate = ((obj.value / sum) * 100).toFixed(2);
						break;
					}
				}
				return `${name}  {colorStyle|${rate}%}`;
			},
			textStyle: {
				color: "#D3E3FF",
				backgroundColor: "transparent",
				rich: {
					a: {
						width: 60,
						padding: [10, 0, 10, 0],
					},
				},
			},
		},
		graphic: {
			elements: [
				{
					type: "circle",
					shape: {
						r: 50, //半径大小
					},
					style: {
						fill: {
							x: 1,
							y: 1,
							r: 1,
							colorStops: [
							{
									offset: 1,
									color: "rgba(50,171,241, .2)",
								},
								{
									offset: 0.5,
									color: "rgba(50,171,241, 0)",
								},
								{
									offset: 0,
									color: "rgba(50,171,241, .2)",
								},
							],
						}, // 填充颜色
					},
					left: "20%",
					top: "middle",
				},
			],
		},
		series: [
			{
				type: "pie",
				data: chartArr,
				center: ["30%", "50%"],
				radius: ["50%", "65%"],
				label: {
					show: false,
					position: "center",
				},
				labelLine: {
					show: false,
				},
				emphasis: {
					label: {
						show: true,
            formatter: (param) => {
              let value = changeNumToWan(param.value);
							return `${param.name}\n\n${value}万元`;
						},
					},
				},
			},
		],
	};
	return options;
};
let pieChartRef = null;
let initPieChartData = (v) => {
	pieChartRef.setOption(calc(v));
};
const initPieChart = (v) => {
	if (!pieChartRef)
		pieChartRef = echarts.init(document.getElementById("pieChart2"));
	initPieChartData(v);
};
defineExpose({
	initPieChart,
});
</script>

<style lang="scss" scoped>
.pie-chart-box {
	width: 100%;
	height: 100%;
	#pieChart2 {
		width: 100%;
		height: 100%;
	}
	.textColor {
		font-size: 14px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #d3e3ff;
		line-height: 21px;
		text-align: center;
	}
}
</style>
